<template>
  <div class="m-dialog" v-if="showDialog">
      <transition name="fade">
          <div class="inner_content">
              <div class="title">{{Title}}<i class="el-icon-close" @click="closeDialog"></i></div>
              <el-divider></el-divider>
              <div class="inner_slot">
                  <slot name="content">


                  </slot>
              </div>
              <div class="btn_group">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
              </div>
          </div>
      </transition>
  </div>
</template>
<script>

export default {
    props:{
        showDialog:{
            type:Boolean,
            default: false
        },
        Title:{
            type:String,
            default:"默认标题"
        }
    },
   setup(props,context){
       //更新父组件
       const closeDialog = () => {
        context.emit('close',false)
       };
       //取消
      const onSubmit = () => {
        context.emit('onsubmit',false)
      }

      return {
          closeDialog,
          onSubmit
      }
    }
      
}
</script>

<style lang="less" scoped>
.el-divider{
    margin: 0;
}
.m-dialog{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, .5);
  .inner_content{
    position: absolute;
    right: 0;
    background-color: #fff;
    height: 100%;
    width: 50%;
    z-index: 1000;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    padding-left: 15px;
  
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 10%;
      font-weight: 500;
      font-size: 22px;
      padding-left: 20px;
      i{
        padding-right: 20px;
      }
    }
    .inner_slot{
      height: 80%;
      display: flex;
      flex-direction: column;
    }
    .btn_group{
      position: absolute;
      width: 100%;
      height: 10%;
      bottom: 0;
      text-align: center;
    }
  }
}

</style>